<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				我的
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--用户信息-->
		<view class="content_2">
			<view class="userinfo_view">
				<button class="user_info" open-type="getUserInfo" @getuserinfo="getUserInfo">
					<image class="user_img" :src="userimage"></image>
					<view class="user_name">{{username}}</view>
				</button>
				<view class="refurbish_view">
					<image class="refurbish_icon" src="../../static/mine/refurbish.png"></image>
					<view class="refurbish_text">更新信息</view>
				</view>
			</view>
			<!--我的分类-->
			<view class="user_type_view">
				<view class="type_box">
					<view class="type_view" @click="toShopCar">
						<view class="type_icon" style="width: 80upx;">
							<image class="type_icon" src="../../static/mine/shopcar.png" mode="aspectFit"></image>
						</view>
						<view class="type_text">购物车</view>
					</view>
					<view class="type_view" @click="toFinish">
						<view class="type_icon">
							<image class="type_icon" src="../../static/mine/order.png" mode="aspectFit"></image>
						</view>
						<view class="type_text">全部订单</view>
					</view>
					<view class="type_view" @click="toFinish" style="display: none;">
						<view class="type_icon">
							<image class="type_icon" src="../../static/mine/refund.png" mode="aspectFit"></image>
						</view>
						<view class="type_text">退货退款</view>
					</view>
				</view>
			</view>
		</view>
		<!--我的列表-->
		<view class="content_3">
			<view class="mineList_view" @click="toCoupon">
				<view class="list_view">
					<view class="list_icon">
						<image class="list_icon" src="../../static/mine/wdyhq.png" mode="aspectFit"></image>
					</view>
					<view class="list_text">整单满减</view>
				</view>
				<image class="to_right" src="../../static/mine/right.png"></image>
			</view>
			<!-- <view class="mineList_view">
				<view class="list_view">
					<view class="list_icon">
						<image class="list_icon" src="../../static/mine/dpgzh.png" mode="aspectFit"></image>
					</view>
					<view class="list_text">店铺公众号</view>
				</view>
				<image class="to_right" src="../../static/mine/right.png"></image>
			</view> -->
			<view class="mineList_view" @click="gotovippage">
				<view class="list_view">
					<view class="list_icon">
						<image class="list_icon" src="../../static/mine/dphyk.png" mode="aspectFit"></image>
					</view>
					<view class="list_text">会员卡片</view>
				</view>
				<image class="to_right" src="../../static/mine/right.png"></image>
			</view>
			<view class="mineList_view" style="display: none;">
				<view class="list_view">
					<view class="list_icon">
						<image class="list_icon" src="../../static/mine/wddz.png" mode="aspectFit"></image>
					</view>
					<view class="list_text">我的地址</view>
				</view>
				<image class="to_right" src="../../static/mine/right.png"></image>
			</view>
		</view>
		<!--地图-->
		<view class="content_4">
			<view class="location_map">
				<map class="location_map" :longitude="longitude" :latitude="latitude" scale="18">
					<!--两个内圆角遮罩层...-->
					<cover-view class="space_1"></cover-view>
					<cover-view class="space_2" style="position: absolute; top: 0upx; right: 0upx;"></cover-view>
					<!--中心点-->
					<image style="width: 50upx; height: 50upx; position: absolute; top: 175upx; left: 325upx;" src="../../static/mine/location.png"
					 mode="aspectFit"></image>
				</map>
			</view>
			<view class="location_text">
				广州科技职业技术大学8号
			</view>
		</view>
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '../../utils/request.js'
	var app = getApp()

	export default {
		data() {
			return {
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				latitude: 23.402893,
				longitude: 113.464431,
				//用户名称
				username: '点击登录',
				//用户头像
				userimage: ''
			}
		},
		onLoad() {
			//获取可用窗口高度
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
				}
			})
			//判断用户登录,获取用户信息
			uni.login({
				success: (res) => {
					new Request('User_Login/GetUserOpendInfoAndRegister').request(
						()=>{
							return 'POST'
						},
						()=>{
							return {
								code: res.code,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project
							}
						},
						(res)=>{
							if (res.data.data.LoginCode == '-1') {
								console.log('用户未登录')
							} else if (res.data.data.LoginCode == '1') {
								this.username = res.data.data.name
								this.userimage = res.data.data.avatar
							}
						}
					)
				}
			})
		},
		methods: {
			toShopCar: function(){
				uni.reLaunch({
					url: '/pages/order/order'
				})
			},
			//跳转已完成订单
			toFinish: function() {
				uni.navigateTo({
					url: '/pages/mine/finish/finish'
				})
			},
			//跳转我的优惠券
			toCoupon: function() {
				uni.navigateTo({
					url: '/pages/mine/coupon/coupon'
				})
			},
			//跳转店铺会员卡
			gotovippage: function(){
				uni.navigateTo({
					url: '/pages/mine/vip/vip'
				})
			},
			//用户点击登录
			getUserInfo: function() {
				//判断用户是否登录
				//code只能用一次,再次调用login获取code
				uni.login({
					success: (res) => {
						this.code = res.code
						uni.getUserInfo({
							success: (res) => {
								//用户允许授权调用接口
								new Request('User_Login/GetUserOpendInfoAndRegister').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											register: 'true',
											encryptedData: res.encryptedData,
											iv: res.iv,
											code: this.code,
											DevelopVersion: app.globalData.DevelopVersion,
											project: app.globalData.project
										}
									},
									(res) => {
										console.log(res.data.data)
										this.username = res.data.data.name
										this.userimage = res.data.data.avatar
										app.globalData.Logincode = res.data.data.LoginCode
									}
								)
							},
							fail: (err) => {
								console.log('用户拒绝授权')
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		height: auto;
		padding-bottom: 50upx;
		background-color: #F0F0F0;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D62D05); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 999;
	}

	.title_1 {
		color: #FFFFFF;
		font-size: 32rpx;
		position: absolute;
		left: 28upx;
		top: 50upx;
	}

	/*
		用户信息样式
	*/
	.content_2 {
		height: 228upx;
		padding-top: 20upx;
		background-image: linear-gradient(#D62D05, #CF1600); //颜色渐变效果(上下)
	}

	.userinfo_view {
		height: 100upx;
		display: flex;
		align-items: center;
		margin: 0 25upx;
		justify-content: space-between;
	}

	.user_info {
		width: auto;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 0upx;
		background: none;
	}

	.user_info::after {
		border: none;
	}

	.user_img {
		width: 100upx;
		height: 100upx;
		background-color: #FFFFFF;
		border-radius: 100upx;
	}

	.user_name {
		height: 50upx;
		font-size: 36upx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 50upx;
		text-align: center;
		margin-left: 20upx;
	}

	.refurbish_view {
		height: 34upx;
		width: 135upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.refurbish_icon {
		width: 30upx;
		height: 30upx;
	}

	.refurbish_text {
		width: 96upx;
		height: 34upx;
		font-size: 24upx;
		color: #FFFFFF;
		line-height: 34upx;
		text-align: center;
	}

	/*
		我的分类样式
	*/
	.user_type_view {
		height: 180upx;
		margin: 0 25upx;
		margin-top: 30upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		display: flex;
		align-items: center;
	}

	.type_box {
		width: 570upx;
		height: 104upx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.type_view {
		width: auto;
		height: 104upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.type_icon {
		width: 65upx;
		height: 60upx;
	}

	.type_text {
		height: 34upx;
		font-size: 24upx;
		color: #2D2D2D;
		line-height: 34upx;
		text-align: center;
		font-weight: bold;
	}

	/*
		我的列表样式
	*/
	.content_3 {
		height: 210upx;
		margin: 0 25upx;
		margin-top: 110upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		display: flex;
		flex-direction: column;
	}

	.mineList_view {
		height: 46upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28upx 44upx;
	}

	.list_view {
		height: 46upx;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list_icon {
		width: 46upx;
		height: 46upx;
		margin-right: 40upx;
	}

	.list_text {
		height: 46upx;
		width: auto;
		text-align: center;
		line-height: 46upx;
		font-size: 30upx;
		color: #2D2D2D;
	}

	.to_right {
		width: 15upx;
		height: 25upx;
	}

	/*
		我的地图样式
	*/
	.content_4 {
		width: 700upx;
		height: 480upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		margin: 0 auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
	}

	.location_map {
		width: 700upx;
		height: 400upx;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		display: flex;
		align-items: center;
	}

	.location_text {
		width: 630upx;
		height: 40upx;
		padding: 20upx 35upx;
		font-size: 28upx;
		line-height: 40upx;
		color: #2D2D2D;
		border-bottom-left-radius: 30upx;
		border-bottom-right-radius: 30upx;
	}

	/*
		两个内圆角遮罩层..
	*/
	.space_1 {
		height: 30upx;
		width: 30upx;
		background-image: radial-gradient(30upx at bottom right, transparent 30upx, #f0f0f0 30upx);
	}

	.space_2 {
		height: 30upx;
		width: 30upx;
		background-image: radial-gradient(30upx at bottom left, transparent 30upx, #f0f0f0 30upx);
	}
</style>
